<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jqDnR :: Minimalistic Drag'n'Resize for jQuery</title>

<!--

dev.iceburg.net/jquery/jqDnR/jquery/jqDnR.js
http://www.ajaxplaza.net/
http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/
http://www.itsavesyou.com/TextArea_Resizer_example.htm
-->
<meta name="author" content="Brice Burgess" />
<meta name="description" content="Minimalistic Drag and Resize for jQuery. Javascript Drag and Resize" />
<meta name="keywords" content="drag, resize, jquery, javascript" />

<!--  Page Styling -->
<link type="text/css" rel="stylesheet" media="all" href="http://dev.iceburg.net/jquery/inc/css/common.css" />
<link type="text/css" rel="stylesheet" media="all" href="http://dev.iceburg.net/jquery/inc/css/example.css" />

<!--  jqDnR Required 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dev.iceburg.net/jquery/inc/jquery.js"></script>
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript" src="http://dev.iceburg.net/jquery/jqDnR/jqDnR.js"></script>

<!--  jqDnR Recommended 
<script type="text/javascript" src="http://dev.iceburg.net/jquery/inc/dimensions.js"></script>
-->
<!--  jqModal [optional] 
<script type="text/javascript" src="http://dev.iceburg.net/jquery/jqModal/jqModal.js"></script>
-->

</head>
<body>
<div class="box">

<div class="example">
1. <em>Resize</em>
</div>
<script type="text/javascript">
$().ready(function() {
	$('#ex1a').jqResize('.jqResize');
	$('#ex1b').jqResize('.jqResize');
	$('#ex1c').jqResize('.jqResize');
});
</script>
<!--
<script type="text/javascript">
document.write('<div class="jqDnR"><textarea></textarea><div class="jqHandle jqResize"></div></div>');
//
</script>
-->
<style>
.jqHandle {
	 background: red;
	 height:15px;
}

.jqDrag {
	width: 100%;
	cursor: move;
}

.jqResize {
	 width: 15px;
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 cursor: se-resize;
}

.jqDnR {
    z-index: 3;
    position: relative;
    
    width: 180px;
    font-size: 0.77em;
    color: #618d5e;
    margin: 5px 10px 10px 10px;
    padding: 8px;padding:10px 15px 10px 10px;
    background-color: #fff;
    border: 1px solid #CCC;height:100px;min-height:100px;min-width:100px;overflow:hidden;
}
textarea{margin:0;overflow:hidden;resize:none;width:100%;height:100%;border:none;}
</style>

<div  id="ex1a" class="jqDnR">
<textarea>
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
</textarea>
	<div class="jqHandle jqResize"></div>
</div>
<div  id="ex1c" class="jqDnR">
<textarea>
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
</textarea>
	<div class="jqHandle jqResize"></div>
</div>
<div  id="ex1b" class="jqDnR">
	I am an example Box "#ex1"<br />
	You can *RESIZE* Me.
	<div class="jqHandle jqResize"></div>
</div>	

<div class="src">
<div class="js">
<a href="#">Javascript</a>
<pre>
$().ready(function() {
  $('#ex1a').jqResize('.jqResize');
});
$().ready(function() {
  $('#ex1b').jqResize('.jqResize');
});
</pre>
</div>

<div class="css">
<a href="#">CSS</a>
<pre>
.jqHandle {
   background: red;
   height:15px;
}

.jqDrag {
  width: 100%;
  cursor: move;
}

.jqResize {
   width: 15px;
   position: absolute;
   bottom: 0;
   right: 0;
   cursor: se-resize;
}

.jqDnR {
    z-index: 3;
    position: relative;
    
    width: 180px;
    font-size: 0.77em;
    color: #618d5e;
    margin: 5px 10px 10px 10px;
    padding: 8px;
    background-color: #EEE;
    border: 1px solid #CCC;
}</pre>
</div>

<div class="html">
<a href="#">HTML</a>
<pre>
&lt;div id=&quot;ex1&quot; class=&quot;jqDnR&quot;&gt;
  I am an example Box &quot;#ex1&quot;&lt;br /&gt;
  You can *RESIZE* Me.
  &lt;div class=&quot;jqHandle jqResize&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>

<div class="example">
2. <em>Drag</em>
</div>
<script type="text/javascript">
$().ready(function() {
	$('#ex2').jqDrag();
	
	$('#ex2b')
		.css('opacity',0.6)
		.jqDrag();
});
</script>

<div id="ex2" class="jqDnR jqDrag">
	I am an example Box "#ex2"<br />
	You can *DRAG* Me.
</div>

<div id="ex2b" class="jqDnR jqDrag">
	I am an example Box "#ex2"<br />
	You can *DRAG* Me. <br />
	Notice my Original Opacity is preserved.
</div>
	
<div class="src">
<div class="js">
<a href="#">Javascript</a>
<pre>
$().ready(function() {
  $('#ex2').jqDrag();
  
  $('#ex2b')
    .css('opacity',0.6)
    .jqDrag();
});</pre>
</div>

<div class="css">
<a href="#">CSS</a>
<pre>
CSS inherited from Example 1.</pre>
</div>

<div class="html">
<a href="#">HTML</a>
<pre>
&lt;div id=&quot;ex2&quot; class=&quot;jqDnR jqDrag&quot;&gt;
  I am an example Box &quot;#ex2&quot;&lt;br /&gt;
  You can *DRAG* Me.
&lt;/div&gt;

&lt;div id=&quot;ex2b&quot; class=&quot;jqDnR jqDrag&quot;&gt;
  I am an example Box &quot;#ex2&quot;&lt;br /&gt;
  You can *DRAG* Me. &lt;br /&gt;
  Notice my Original Opacity is preserved.
&lt;/div&gt;</pre>
</div>
</div>

<div class="example">
3. <em>Resize + Drag</em>
</div>
<script type="text/javascript">
$().ready(function() {
	$('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script>

<div id="ex3" class="jqDnR">
	<div class="jqHandle jqDrag"></div>
	<br />
	I am an example Box "#ex3"<br />
	Using the Handles, you can *RESIZE*
	and *DRAG* me.
	<div class="jqHandle jqResize"></div>
</div>
	
<div class="src">
<div class="js">
<a href="#">Javascript</a>
<pre>
$().ready(function() {
  $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});</pre>
</div>

<div class="css">
<a href="#">CSS</a>
<pre>
CSS inherited from Example 1.</pre>
</div>

<div class="html">
<a href="#">HTML</a>
<pre>
&lt;div id=&quot;ex3&quot; class=&quot;jqDnR&quot;&gt;
  &lt;div class=&quot;jqHandle jqDrag&quot;&gt;&lt;/div&gt;
  &lt;br /&gt;
  I am an example Box &quot;#ex3&quot;&lt;br /&gt;
  Using the Handles, you can *RESIZE*
  and *DRAG* me.
  &lt;div class=&quot;jqHandle jqResize&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>

<br clear="both" />

<div class="wwwwh">Etc.</div>

<p><em>Known Issues, Pending Changes</em>;</p>
<ul>
<li>Please report any issues or odd behavior</li>
</ul>

<ul>
<li><strong>OPERA</strong> Dragging is broken for relatively posistioned elements (like the examples above) in current version of Opera. The left/top position of elements are returned incorrectly* by $.css('left') and $.css('top'), resulting in the element jumping far down the page. * Opera appears to always return the element position relative to page offset vs. parent element.</li>
<li>TODO (r3 or r4); Add minimum and maximum height and width during resize. Add onResize, onResizing, onDrag, onDragging, and onDrop callbacks.</li>
</ul>

</div>

<script type="text/javascript">
// common
$().ready(function() {
   $('div.src a').click(function(){
    $('../pre',this).toggle();
    return false;
   });
});
</script>

</body>
</html>
